<template>
	<view class="seckillDetail">
		<view class="top-banner">
			<u-swiper height="440" :list="list1" @click="click"></u-swiper>
			<image @click="back" src="../../static/seckill/seckillBack.png" style="width: 52rpx;height: 52rpx;position: absolute;top: 110rpx;left: 40rpx;"
			 mode=""></image>
		</view>
		<!-- 返回顶部 -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
			<image class="topc" src="../../static/seckill/backTop.png" style="width: 68rpx;height: 68rpx;border-radius: 50%;" @click="top" mode=""></image>
		</view>
		<view class="price-box">
			<view class="price">
				<view class="price-left">
					<view class="current-price">
						{{price}}积分
					</view>
					<view class="original-price">
						实际价格<text style="text-decoration:line-through">￥{{original_price}}</text>
					</view>
				</view>
			</view>
			<view class="price-title">
				{{name}}
			</view>
		</view>
		<view class="specification">
			<view class="specification-box" @click="openSize(0)">
				<text>选择</text>
				<text>颜色/尺码</text>
			</view>
			<view class="specification-box">
				<text>发货</text>
				<text>四川成都
				<!-- <text style="width: 8rpx;display: inline-block;height: 32rpx;background-color: #E5E5E5;margin: 0 12rpx;"></text>快递：免运费 -->
				 </text>
			</view>
			<view class="specification-box" @click="openSize(1)">
				<text>保障</text>
				<text>假一赔四·保价服务·退货运费险</text>
			</view>
			<view class="specification-box" @click="openSize(2)">
				<text>参数</text>
				<text>品牌 材质...</text>
			</view>
		</view>
		<view class="shop-name">
			<image :src="img" mode=""></image>
			<text>浪度官方店铺</text>
		</view>
		<view class="shop-detail">
			<view class="recommend-title" style="background-image: url(../../../static/mine/henxian.png);">
				<text>商品详情</text>
			</view>
			<view class="shop-detail-box">
				<!-- 广告部分 -->
			</view>
			<view class="explain">
				<view class="explain-title">
					积分价格说明
				</view>
				<view class="explain-box">
					<view class="explain-box-top">
						<view style="width: 10rpx;height: 10rpx;background: #FF7200;border-radius: 50%;opacity: 1;"></view>
						<text class="explain-box-title">积分价格</text>
					</view>
					<view class="explain-text">
						<text>商品的积分是按照实际价格来进行兑换，按照1积分=0.01元来进行计算</text>
					</view>
				</view>
				<view class="explain-box">
					<view class="explain-box-top">
						<view style="width: 10rpx;height: 10rpx;background: #FF7200;border-radius: 50%;opacity: 1;"></view>
						<text class="explain-box-title">产品详情页</text>
					</view>
					<view class="explain-text">
						<text>产品详情页(含 主图)以图片或文字形式标注的促销价、优惠价等价格可能是在使用特定优惠活动和时段等情形下的价格,具体请以结算页面的标价、优惠条件或活动规则为准。</text>
					</view>
				</view>
				<view class="explain-box">
					<view class="explain-box-top">
						<view style="width: 10rpx;height: 10rpx;background: #FF7200;border-radius: 50%;opacity: 1;"></view>
						<text class="explain-box-title">提示</text>
					</view>
					<view class="explain-text">
						<text>此说明仅当出现价格比较时有效，商家单独对划线价格进行说明的，以商家的表述为准。</text>
					</view>
				</view>
			</view>
		</view>
		<view class="recommend">
			<view class="recommend-title" style="background-image: url(../../../static/mine/henxian.png);">
				<text>为你推荐</text>
			</view>
			<view class="recommend-box">
				<view class="recommend-shop-box" v-for="(item,index) in shopList" :key='index'>
					<image style="width: 100%;height: 298rpx;border-radius: 20rpx 20rpx 0 0;" :src="item.image" mode=""></image>
					<text class="recommend-shop-box-title">{{item.name}}</text>
					<view class="integral">
						<text>{{item.price}}积分</text>
						<text>{{item.sales}}人已兑换</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn-right">
				<view class="btn-right-btn">
					<view class="conversion" v-if="userintegral>=3000" @click="exchange(userintegral)">
						立即兑换
					</view>
					<view class="integral" v-else>
						<text style="font-size: 32rpx;">积分不足</text>
						<text style="font-size: 24rpx;margin-top: 10rpx;">还差1555积分</text>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" v-model="show" mode="bottom" :round="true">
		            <view style="width: 100%;height: auto;background: #FFFFFF;padding: 40rpx;">
		                <size-pop v-if="num==0" :test="isTest" @send="getSonValue" :sizeArr="sizeArr" :obj="obj"></size-pop>
						<servePop v-if="num==1"></servePop>
						<parameter-pop v-if="num==2" :parameterObj="parameterObj"></parameter-pop>
		            </view>
		</u-popup>
	</view>
</template>

<script>
	import {getGoodsDetails,getGoodsList} from '@/service/goods.js'//商品详情
	import sizePop from '../earn/sizePop'
	import parameterPop from '../earn/parameterPop'
	import servePop from '../earn/servePop'
	export default {
		components:{
			sizePop,
			parameterPop,
			servePop
		},
		data() {
			return {
				img:'',//商家头像
				price:'',//商品售价
				original_price:'',//原价
				name:'',//商品名称
				num:-1,//参数弹框
				show:false,
				userintegral:'3000',//用户积分
				list1: [],
				shopList: [],
				 topState:false,
				 Carnum:0,//购物车数量
				 sizeArr:[],//颜色/规格数组
				 params:{
				 	goods_id:''
				 },//商品详情参数
				 obj:{},//商品信息
				 isTest:false,//默认显示加入购物车按钮
				 parameterObj:{},//参数详情
				 two_class:'',//二级商品id
			}
		},
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>600){ //当距离大于600时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于600时显示回到顶部按钮
		        this.topState = false
		    }
		},
		onLoad(options) {
			this.params.goods_id = options.id;
			this.getGoodsDetails()
		},
		methods: {
			//为你推荐
			recommendList(){
				let params = {
					sort:0,
					two_class:this.two_class,
					limit:10,
					page:1
				}
				getGoodsList(params).then(res=>{
					this.shopList = res.data.data
				})
			},
			//商品详情
			getGoodsDetails(){
				getGoodsDetails(this.params).then(res=>{
					if(res.data.is_collect==0){//0.为收藏 1.已收藏
						this.isshoucang = false
					}else{
						this.isshoucang = true
					}
					// 为你推荐列表
					this.two_class = res.data.two_class
					this.recommendList()
					let arr = res.data.spec_relation
					let new_arr = arr.map((item,index)=>{
						return Object.assign(item,{showFlag:0})
					})
					this.sizeArr = new_arr
					this.list1=res.data.images;
					this.name = res.data.name;
					this.price = res.data.price;
					this.img = res.data.merchant_avatar
					this.original_price = res.data.original_price;
					this.obj = {
						name:res.data.name,
						price:res.data.price,
						original_price:res.data.original_price,
						image:res.data.image
					}
				})
			},
			back(){
				uni.navigateBack()
			},
			//关闭子组件弹框方法
			getSonValue(res,num){
				this.show = res;//关闭弹框
				this.Carnum = num
			},
			//立即兑换
			exchange(userintegral){
				this.isTest = true;//弹框显示 立即兑换 按钮
				this.num = 0;
				this.show = true;
			},
			//加入购物车
			addShopCar(){
				this.show = true;
				this.num = 0;
				this.isTest = false;//弹框显示 加入购物车 按钮
			},
			//尺码
			openSize(type) {
				this.show = true
				if(type==0){//颜色
					this.num = 0
					
				}
				if(type==1){//服务
					this.num = 1
				}
				if(type==2){//产品参数
					this.num = 2
				}
			},
			top() { //回到顶部  
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　} ,
			//立即秒杀
			// jumpOrder(){
			// 	uni.navigateTo({
			// 		url:'../mine/placeOrder/placeOrder'
			// 	})
			// 	}
		}
	}
</script>

<style scoped lang="less">
	.btn-box {
		width: 100%;
		height: 124rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 0px;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
	
		.btn-right {
			display: flex;
			width: 100%;
	
			.btn-right-btn {
				display: flex;
				width: 100%;
				.conversion {
					flex: 1;
					height: 88rpx;
					background: #FF0000;
					opacity: 1;
					border-radius: 44rpx;
					color: #ffffff;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
	
				.integral {
					flex: 1;
					flex-direction: column;
					height: 88rpx;
					background: #B8B6B4;
					opacity: 1;
					border-radius: 44rpx;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	
		.btn-left {
			width: 200rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
	
			.shop-car {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
	
				.num {
					width: 28rpx;
					height: 28rpx;
					border: 2px solid red;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 16rpx;
					color: red;
					position: absolute;
					right: 4rpx;
					top: 4rpx;
				}
	
				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #858585;
					margin-top: 8rpx;
				}
			}
	
			.shoucang {
				display: flex;
				flex-direction: column;
				align-items: center;
	
				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #858585;
					margin-top: 8rpx;
				}
			}
		}
	
		.btn-right {
			flex: 1;
		}
	}
	/* 回到顶部 */
	    .top {
	        position: relative;
	        display: none; /* 先将元素隐藏 */
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
	    }
	 
	    .topc {
	        position: fixed;
	        right: 0;
	        background: #F0F0F0;
	        top: 70%;
	        height: 50px;
	        line-height: 50px;
	    }
	.explain {
		padding: 40rpx;

		.explain-title {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			margin-bottom: 40rpx;
		}
		.explain-box{
			.explain-text{
				margin-left:28rpx;
				margin-top: 12rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 44rpx;
				color: #666666;
			}
			.explain-box-top{
				display: flex;
				align-items: center;
				text{
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-left: 20rpx;
				}
			}
		}
	}

	.shop-detail {
		margin-top: 80rpx;

		.shop-detail-box {
			width: 100%;
			height: 544rpx;
			background: #D19A9A;
			opacity: 1;
			border-radius: 0px;
		}
	}

	.recommend {
		margin-top: 60rpx;
		width: 100%;
		padding: 0 40rpx 100rpx;

		.recommend-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.recommend-shop-box {
				padding-bottom: 20rpx;
				width: 45%;
				height: auto;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 40rpx;
				display: flex;
				flex-direction: column;

				.recommend-shop-box-title {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
					padding: 20rpx;
				}

				.integral {
					padding: 0 20rpx;

					text:first-child {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FF7200;
					}

					text:last-child {
						font-size: 20rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.recommend-title {
		margin-bottom: 40rpx;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: 172px 2px;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.shop-name {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 40rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
		}

		text {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
	}

	.specification {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 20rpx;
		margin-bottom: 60rpx;
		margin-top: 20rpx;
		padding: 24rpx 40rpx;

		.specification-box {
			display: flex;
			align-items: center;
			margin-bottom: 12rpx;

			text:first-child {
				width: 150rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}

			text:last-child {
				flex: 1;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.price-box {
		padding: 20rpx 40rpx;
		margin: 20rpx 0;
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.16);

		.price {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.price-right {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}

			.price-left {
				display: flex;
				align-items: center;

				.current-price {
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF0000;
				}

				.original-price {
					margin-left: 12rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF0000;
				}
			}
		}

		.price-title {
			margin-top: 20rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 32rpx;
			color: #666666;
		}
	}

	.top-banner {
		width: 100%;
		height: 440rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 0px;
		position: relative;
	}
</style>
